<script>
/**
 * @desc tab模块使用的loading
 */

export default {
  name: 'loading-comp',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<template>
  <div :class="show ? $sty.containerShow : $sty.containerHide">
    <div :class="$sty.content">
      <div :class="$sty.ico"></div>
    </div>
  </div>
</template>

<style lang="scss" module>
$icoSize: 80px;

%container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  transition: all 0.5s;
  background-color: #fff;
}

.containerShow {
  @extend %container;
  visibility: visible;
  opacity: 1;
}

.containerHide {
  @extend %container;
  visibility: hidden;
  opacity: 0;
}

.content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: $icoSize;
  height: $icoSize;
  transform: translate(-50%, -50%);
}

.ico {
  width: 100%;
  height: 100%;
  background: url('@/assets/icons/loading.png') center/cover no-repeat;
  animation: icoAnimate linear 1s infinite;
}

@keyframes icoAnimate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}
</style>

